<template>
  <el-dialog :visible.sync="value" :before-close="cancel">
    <template slot="title">
      {{auditStep===1?'一次审核':'二次审核'}}
    </template>
    <el-form
      :model="form"
      :rules="auditRule"
      ref="auditForm"
      :label-width="formLabelWidth">
      <el-form-item label="修改类型">
        <el-col :span="16">
          <el-input @keyup.enter.native="submitForm('auditForm')" v-model="optType" disabled auto-complete="off"/>
        </el-col>
      </el-form-item>
      <!--<el-form-item label="修改内容">-->
        <!--<el-col :span="16">-->
          <!--<el-input @keyup.enter.native="submitForm('auditForm')" v-model="formatCashRuleName" disabled auto-complete="off"/>-->
        <!--</el-col>-->
      <!--</el-form-item>-->
      <el-form-item label="账户名">
        <el-col :span="16">
          <el-input @keyup.enter.native="submitForm('auditForm')" v-model="rowData.username" disabled="disabled" auto-complete="off"/>
        </el-col>
      </el-form-item>
      <el-form-item label="申请原由">
        <el-col :span="16">
          <el-input @keyup.enter.native="submitForm('auditForm')" type="textarea" v-model="rowData.remark" disabled auto-complete="off"/>
        </el-col>
      </el-form-item>
      <el-form-item label="一审备注" prop="remark" v-if="auditStep===1 && current === 0">
        <el-col :span="16">
          <el-input @keyup.enter.native="submitForm('auditForm')" type="textarea" v-model="form.remark" auto-complete="off"/>
        </el-col>
      </el-form-item>
      <el-form-item label="一审备注" v-else>
        <el-col :span="16">
          <el-input @keyup.enter.native="submitForm('auditForm')" type="textarea" v-model="rowData.firstRemark" disabled auto-complete="off"/>
        </el-col>
      </el-form-item>
      <el-form-item label="二审备注" v-if="auditStep===2 && current === 0" prop="remark">
        <el-col :span="16">
          <el-input @keyup.enter.native="submitForm('auditForm')" type="textarea" v-model="form.remark" auto-complete="off"/>
        </el-col>
      </el-form-item>
      <el-form-item label="二审备注" v-if="auditStep===2 && current === 1" prop="secondRemark">
        <el-col :span="16">
          <el-input @keyup.enter.native="submitForm('auditForm')" type="textarea" v-model="rowData.secondRemark" disabled auto-complete="off"/>
        </el-col>
      </el-form-item>
      <el-form-item label="审核结果" v-if="current === 0" prop="status">
        <el-col :span="16">
          <el-radio-group v-model="form.status" size="medium">
            <el-radio-button :label="1" value="1">通过</el-radio-button>
            <el-radio-button :label="2" value="2">不通过</el-radio-button>
          </el-radio-group>
        </el-col>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" v-if="current === 0">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submitForm('auditForm')" :loading="!istap">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>

import { form } from '@/build';
import { getAuditDetail, updateAudit } from '@/services/api/audit';

export default {
  name: 'audit-dialog',
  props: {
    value: {
      type: Boolean,
      default: true,
    },
    id: {
      type: Number,
    },
    auditStep: {
      type: Number,
    },
    rowData: {
      type: Object,
      required: true,
      default: {
        itemList: [],
      },
    },
    commSeleList: {
      type: Array,
      default: () => [],
    },
    commCaseSeleList: {
      type: Array,
      default: () => [],
    },
  },
  mixins: [form],
  data() {
    return {
      istap: true, // 防止多次提交
      formLabelWidth: '180px',
      form: {
        step: this.auditStep,
        manageId: this.rowData.manageId,
        status: undefined,
        remark: undefined,
        menuId: this.rowData.menuId,
      },
      auditRule: {
        firstRemark: [
          { required: true, message: '一审备注不能为空', trigger: 'blur' },
          { max: 45, message: '不能超过45个字符' },
        ],
        remark: [
          { required: true, message: '备注不能为空', trigger: 'blur' },
          { max: 45, message: '不能超过45个字符' },
        ],
        secondRemark: [
          { required: true, message: '二审备注不能为空', trigger: 'blur' },
          { max: 45, message: '不能超过45个字符' },
        ],
        status: [
          { required: true, message: '请确认审核结果', trigger: 'blur' },
        ],
      },
    };
  },
  computed: {
    current() {
      let _current = 0;
      if (this.auditStep == 1) {
        _current = this.rowData.status === 0 ? 0 : 1;
      }
      if (this.auditStep == 2) {
        _current = this.rowData.status === 1 ? 0 : 1;
      }
      return _current;
    },

    optType() {
      return _.toConverter(this.rowData.optType, 'AUDIT_TYPE');
    },

    optData() {
      const { optType, optData } = this.rowData;
      const optDataArr = optData.split(',');
      switch (optType) {
        case 10:
          return `额度：${optDataArr[0]}，状态：${_.toConverter(parseInt(optDataArr[1]), 'AGENCY_CREDIT_STATUS')}`;
        default:
          return this.formatPhoneEmail(optData);
      }
    },
    formatCashRuleName() {
      if (!this.commCaseSeleList.length) return null;
      const { optType, optData, formatOptData = {} } = this.rowData;
      if (optType === 14) return this.formatFeeRuleName(optData);
      if (optType === 15) {
        let resList = [];
        if (formatOptData.commMode === 1) {
          resList.push('现金网');
          resList = [...resList, ...formatOptData.itemList.map(v => v.rate || 0)];
          const { name } = this.commCaseSeleList.find(item => item.id == formatOptData.cashRuleId) || {};
          resList.push(name);
        }
        if (formatOptData.commMode === 2) {
          resList.push('信用网');
          resList = [...resList, ...formatOptData.itemList.map(v => v.rate || 0)];
          resList.push(formatOptData.minEffectMemberNum);
        }
        return resList.join(',');
      }
      return optData;
    },
  },
  watch: {
    'form.remark': function (val) {
      if (!_.isUndefined(val)) {
        this.istap = true;
      }
    },
    'form.firstRemark': function (val) {
      if (!_.isUndefined(val)) {
        this.istap = true;
      }
    },
    'form.secondRemark': function (val) {
      if (!_.isUndefined(val)) {
        this.istap = true;
      }
    },
    'form.status': function (val) {
      if (!_.isUndefined(val)) {
        this.istap = true;
      }
    },
    auditStep() {
      this.form.step = this.auditStep;
    },
  },
  mounted() {
    this.bindSave(updateAudit, 'saveForm', 'form', {
      afterSuccess: () => {
        this.istap = true;
        this.cancel();
        this.$parent.getAll();
      },
      afterFail: () => {
        this.istap = true;
      },
    });
  },
  methods: {
    formatFeeRuleName(id) {
      if (!this.commSeleList.length) return null;
      const { name } = this.commSeleList.find(item => item.id == id) || {};
      return name;
    },
    cancel() {
      this.$emit('input', false);
    },
    submitForm(formName) {
      if (!this.istap) {
        return;
      }
      this.istap = false;
      this.doSave({ action: 'saveForm', form: formName });
    },
    formatPhoneEmail(val) {
      let res = '';
      if (val && val != '') {
        const phoneShowPartial = this.roleCheck('phone-show-partial');
        const phoneShowAll = this.roleCheck('phone-show-all');
        const emailShowPartial = this.roleCheck('email-show-partial');
        const emailShowAll = this.roleCheck('email-show-all');
        if (val.indexOf(',') > -1) {
          const arr = val.split(',');
          if (arr.length > 2) {
            res = `${arr[0]},${_.formatUserPhoneEmail(arr[1], phoneShowPartial, phoneShowAll)},${_.formatUserPhoneEmail(arr[2], emailShowPartial, emailShowAll)}`;
          } else {
            res = _.formatUserPhoneEmail(arr[1], phoneShowPartial, phoneShowAll);
          }
        } else {
          res = _.formatUserPhoneEmail(val, emailShowPartial, emailShowAll);
        }
      }
      return res;
    },
  },

};
</script>

<style lang="scss" scoped>

</style>
